<template>
  <div class="unitInfo-tableContainer">
    <div class="unitInfo-tableTitle">
      <h2>{{yearText}}年和{{year}}年临安区公共机构能源消耗对比表</h2>
      <span>
        【 汇总年份：
        <el-date-picker v-model="yearText" type="year" value-format="yyyy" placeholder="选择年" style="width:100px;" @change="doSearch('upYear')">
        </el-date-picker>&nbsp;年和
        <el-date-picker v-model="year" type="year" value-format="yyyy" placeholder="选择年" style="width:100px;" @change="doSearch('downYear')">
        </el-date-picker>年能源消耗对比&nbsp;&nbsp;&nbsp;
        <el-checkbox v-model="checked" @change="getDetail()">汇总至一级单位(含下属二级单位)</el-checkbox> 】
      </span>
    </div>
    <div class="unitInfo-tableContent">
      <div class="table-row">
        <table width="45%" border="1" cellpadding="10">
          <tr>
            <td></td>
            <td align="center" valign="middle" colspan="7">{{yearText}}</td>
          </tr>
          <tr>
            <td align="center" valign="middle" width="60">序号</td>
            <td align="center" valign="middle">单位</td>
            <td align="center" valign="middle">水量<br/>(吨)</td>
            <td align="center" valign="middle">电量<br/>(千瓦时)</td>
            <td align="center" valign="middle">汽油<br/>(升)</td>
            <td align="center" valign="middle">柴油<br/>(升)</td>
            <td align="center" valign="middle">建筑面积<br/>(平米)</td>
            <td align="center" valign="middle">用能人数</td>
          </tr>
          <tr :key="index" v-for="(item ,index) in  dataArray.upYear">
            <td align="center" valign="middle">{{index+1}}</td>
            <td align="center" valign="middle">{{item.DepartmentName}}</td>
            <td align="center" valign="middle">{{item.WaterTotal||0}}</td>
            <td align="center" valign="middle">{{item.ElectricityTotal||0}}</td>
            <td align="center" valign="middle">{{item.GasolineTotal||0}}</td>
            <td align="center" valign="middle">{{item.DieselTotal||0}}</td>
            <td align="center" valign="middle">{{getArea(item.TotalArea)}}</td>
            <td align="center" valign="middle">{{item.PeopleTotal||0}}</td>
          </tr>
        </table>
        <table width="25%" border="1" cellpadding="10">
          <tr>
            <td align="center" valign="middle" colspan="6">{{year}}</td>
          </tr>
          <tr>
            <td align="center" valign="middle">水量<br/>(吨)</td>
            <td align="center" valign="middle">电量<br/>(千瓦时)</td>
            <td align="center" valign="middle">汽油<br/>(升)</td>
            <td align="center" valign="middle">柴油<br/>(升)</td>
            <td align="center" valign="middle">建筑面积<br/>(平米)</td>
            <td align="center" valign="middle">用能人数</td>
          </tr>
          <tr :key="index" v-for="(item ,index) in dataArray.downYear">
            <td align="center" valign="middle">{{item.WaterTotal||0}}</td>
            <td align="center" valign="middle">{{item.ElectricityTotal||0}}</td>
            <td align="center" valign="middle">{{item.GasolineTotal||0}}</td>
            <td align="center" valign="middle">{{item.DieselTotal||0}}</td>
            <td align="center" valign="middle">{{getArea(item.TotalArea)}}</td>
            <td align="center" valign="middle">{{item.PeopleTotal||0}}</td>
          </tr>
        </table>
        <table width="30%" border="1" cellpadding="10">
          <tr>
            <td align="center" valign="middle" colspan="9">
              数据分析
            </td>
          </tr>
          <tr>
            <td align="center" valign="middle">{{yearText}}单位<br/>面积耗电量</td>
            <td align="center" valign="middle">{{year}}单位<br/>面积耗电量</td>
            <td align="center" valign="middle">同比</td>
            <td align="center" valign="middle">{{yearText}}人均<br/>耗电量</td>
            <td align="center" valign="middle">{{year}}人均<br/>耗电量</td>
            <td align="center" valign="middle">同比</td>
            <td align="center" valign="middle">{{yearText}}人均<br/>耗水量</td>
            <td align="center" valign="middle">{{year}}人均<br/>耗水量</td>
            <td align="center" valign="middle">同比</td>
          </tr>
          <tr :key="index" v-for="(item ,index) in dataArray.upYear">
            <td align="center" valign="middle">{{getAverage('areaAvg','upYear',index)}}</td>
            <td align="center" valign="middle">{{getAverage('areaAvg','downYear',index)}}</td>
            <td align="center" valign="middle">{{compareAvg('areaAvg',index)}}</td>
            <td align="center" valign="middle">{{getAverage('electAvg','upYear',index)}}</td>
            <td align="center" valign="middle">{{getAverage('electAvg','downYear',index)}}</td>
            <td align="center" valign="middle">{{compareAvg('electAvg',index)}}</td>
            <td align="center" valign="middle">{{getAverage('waterAvg','upYear',index)}}</td>
            <td align="center" valign="middle">{{getAverage('waterAvg','downYear',index)}}</td>
            <td align="center" valign="middle">{{compareAvg('waterAvg',index)}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        yearText: new Date().getFullYear() + '',
        year: (new Date().getFullYear() - 1) + '',
        checked: true,
        isGetting: false,
        dataArray: {
          upYear: [],
          downYear: [],
        },
      }
    },
    methods: {
      async getDetail(year, type) {
        this.dataArray[type] = [];
        const result = await this.$get("/api/InstituionEnergy/statisticsByDepartment", {
          year: year,
          includeChild: this.checked
        })
        if (result.length > 0) {
          result.map((i) => {
            i.areaAvg = i.TotalArea ? (i.ElectricityTotal / i.TotalArea).toFixed(2) : 0;
            i.electAvg = i.PeopleTotal ? (i.ElectricityTotal / i.PeopleTotal).toFixed(2) : 0;
            i.waterAvg = i.PeopleTotal ? (i.WaterTotal / i.PeopleTotal).toFixed(2) : 0;
          })
          this.dataArray[type] = result
        }
        console.log(this.dataArray[type])
      },
      doSearch(str) {
        if (str == 'upYear') {
          this.getDetail(this.yearText, str)
        } else {
          this.getDetail(this.year, str)
        }
      },
      getAverage(str, dataType, index) {
        return this.dataArray[dataType][index][str]
      },
      compareAvg(str, index) {
        if (this.dataArray.upYear[index][str] == 0 && this.dataArray.downYear[index][str] != '0') {
          return '无穷大'
        } else if (this.dataArray.upYear[index][str] != '0' && this.dataArray.downYear[index][str] != '0') {
          return ((this.dataArray.downYear[index][str] - this.dataArray.upYear[index][str]) * 100 / this.dataArray.upYear[index][str]).toFixed(2) + '%'
        } else {
          return 0
        }
      },
      getArea(num) {
        if (num) return num;
        return 0;
      }
    },
    created() {
      this.showHome.isShow = false;
      this.getDetail(this.yearText, 'upYear')
      this.getDetail(this.year, 'downYear')
    }
  }

</script>
<style lang="scss" scoped>
  .unitInfo-tableContainer {
    width: 100%;
    padding: 20px 15px;
  }

  .unitInfo-tableTitle {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 25px;
    h2 {
      font-size: 16px;
      margin-bottom: 10px;
    }
    span {
      font-size: 16px;
      font-weight: bold;
    }
    p {
      font-size: 16px;
      margin-top: 5px;
      font-weight: bold;
    }
  }

  .unitInfo-tableInfo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 25px;
    color: #606266;
  }

  .unitInfo-tableContent {
    width: 1200px;
    height: 500px;
    overflow: auto;
    .table-row {
      width: 180%;
      display: flex;
      flex-direction: row;
      table {
        color: #606266;
        border: 1px solid #ebeef5;
        float: left;
        td {
          padding: 6px 0px;
        }
        tr.table-row {
          height: 45px;
        }
      }
    }
  }

  .table-footers {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    .tableFooter-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 25px;
      .tableFooter-col {
        flex: 1;
      }
    }
  }

  .table-button {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
</style>